<template>
    <div>
        <div id="main" style="width:100%;height:500px"></div>
    </div>
</template>

<script>
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
} from 'echarts/components'
import { GraphChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

import axios from 'axios'
import * as DATA from './data'
export default {
    data() {
        return {}
    },
    beforeMount() {
        this.$echarts.use([
            TitleComponent,
            TooltipComponent,
            LegendComponent,
            GraphChart,
            CanvasRenderer,
        ])
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            var myChart = this.$echarts.init(document.getElementById('main'))
            var option
            var ROOT_PATH =
                'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'

            axios
                .get(ROOT_PATH + '/data/asset/data/les-miserables.json')
                // eslint-disable-next-line no-unused-vars
                .then(resp => {
                    const graph = DATA.params

                    const _node = graph.nodes
                        .map(node => {
                            node.label = {
                                show: node.symbolSize > 30,
                            }
                            return node
                        })
                        .sort((a, b) => {
                            return a.symbolSize - b.symbolSize
                        })

                    option = {
                        title: {
                            text: '关系图',
                            subtext: '组织架构',
                            top: 'top',
                            left: 'right',
                        },
                        tooltip: {},
                        legend: [
                            {
                                data: graph.categories.map(a => {
                                    return a.name
                                }),
                            },
                        ],
                        animationDuration: 1500,
                        animationEasingUpdate: 'quinticInOut',
                        series: [
                            {
                                name: '关系图',
                                type: 'graph',
                                layout: 'none',
                                data: _node,
                                links: graph.links,
                                categories: graph.categories,
                                roam: true,
                                label: {
                                    formatter: '{b}',
                                },
                                lineStyle: {
                                    color: 'source',
                                    curveness: 0, //边的曲度，支持从 0 到 1 的值，值越大曲度越大。
                                },
                                emphasis: {
                                    focus: 'adjacency',
                                    lineStyle: {
                                        width: 10,
                                    },
                                },
                            },
                        ],
                    }
                    myChart.setOption(option)
                })

            option && myChart.setOption(option)
        },
    },
}
</script>

<style lang="less" scoped>
</style>